<script setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

import { useUseStore } from "@/stores/user";

import { eshopLimitPrice, shopLimitPrice } from "@/server/api/rechargeOrder";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
/*
&注册区
*/
const route = useRoute();
const router = useRouter();
const useStore = useUseStore();
const ItpStore = route.query.ItpStore; //定义显示item或shop状态
const valueNumber = ref(1.0);


//网店提升额度积分价格
const iPrice = ref();
//实体店提升额度积分价格
const rPrice = ref();
/*
&方法区域
*/
//网店
const internetPrice = async () => {
  const res = await eshopLimitPrice();
  iPrice.value = res.data.data;
}
//实体店
const realPirce = async () => {
  const res = await shopLimitPrice();
  rPrice.value = res.data.data
}
// 定义数据捕捉方法
const beforeChange = (value) => {
  valueNumber.value = value;
};

// 把数值推给订单提交
const addPrice = () => {
  router.push({
    path: "confitmord",
    query: {
      value: valueNumber.value,
    },
  });
};

onMounted(() => {
  useStore.getUpload(); //获取item上架次数调用
  internetPrice();
  realPirce();
});
</script>

<template>
  <!-- 主体模块 -->
  <main>
    <TopButton :title="$t('me.addNum.mianTitle')" style="background-color: transparent" />
    <div class="handoff-btn">
      <div class="btn active" v-show="ItpStore == 0">
        {{ $t("MenusNav.home") }}
      </div>
      <div class="btn active" v-show="ItpStore == 1">
        {{ $t("MenusNav.shop") }}
      </div>
    </div>

    <ul>
      <li v-if="ItpStore == 0">
        <!-- 个人模块 -->
        <header>
          {{ $t("me.addNum.title1") }}
          <div class="text">{{ useStore.Upload }}</div>
        </header>
        <div class="card box_show">
          <h5>{{ $t("me.addNum.title2") }}</h5>
          <div class="bottom">
            <div class="addCart">
              <van-stepper v-model="valueNumber" theme="round" button-size="22" disable-input
                :before-change="beforeChange" />
            </div>
          </div>
        </div>

        <div class="card box_show">
          <div class="title">
            <h5>{{ $t("me.addNum.total") }}</h5>
          </div>
          <div class="bottom">
            <div class="addCart">
              <div class="total">
                <b>eCNY</b>
                {{ valueNumber * iPrice }}
              </div>
            </div>
          </div>
        </div>
        <footer>
          <p>{{ $t("me.recharge.illustrate") }}:</p>
          <p>
            {{ $t("me.recharge.tips") }}
          </p>
          <div class="button" @click="addPrice">{{ $t("me.recharge.recharge") }}</div>
        </footer>
      </li>

      <li v-else>
        <!--商家模块 -->
        <!-- 个人模块 -->
        <header>
          {{ $t("me.addNum.title1") }}
          <div class="text">{{ useStore.shopUpload }}</div>
        </header>

        <div class="card box_show">
          <h5>{{ $t("me.addNum.title2") }}</h5>
          <div class="bottom">
            <div class="addCart">
              <van-stepper v-model="valueNumber" theme="round" button-size="22" disable-input
                :before-change="beforeChange" />
            </div>
          </div>
        </div>

        <div class="card box_show">
          <div class="title">
            <h5>{{ $t("me.addNum.total") }}</h5>
          </div>
          <div class="bottom">
            <div class="addCart">
              <div class="total">
                <b>eCNY</b>
                {{ valueNumber * rPrice }}
              </div>
            </div>
          </div>
        </div>
        <footer>
          <p>{{ $t("me.recharge.illustrate") }}:</p>
          <p>
            {{ $t("me.recharge.tips") }}
          </p>
          <div class="button" @click="addPrice">{{ $t("me.recharge.recharge") }}</div>
        </footer>
      </li>
    </ul>
  </main>
</template>
<style lang="scss" scoped>
main {
  padding: 60rem 10rem 0;
  box-sizing: border-box;
  background-color: #f5f5f5;
  height: 100vh;
  font-size: 14rem;

  .handoff-btn {
    display: flex;
    padding: 20rem 10rem;
    height: 25rem;

    .btn {
      transition: all 0.5s;
      color: #ccc;
      font-size: 18rem;
      position: relative;
      margin-right: 20rem;

      &::after {
        display: none;
        width: 20rem;
        height: 2rem;
        content: "";
        position: absolute;
        bottom: -10rem;
        left: 50%;
        transform: translate(-50%, -50%);
        border-bottom: 2rem solid rgba(100, 46, 142, 1);
      }

      &:hover {
        font-size: 20rem;
        color: #000;

        &::after {
          display: block;
        }
      }

      &.active {
        color: #000;
        font-size: 20rem;

        &::after {
          display: block;
        }
      }
    }
  }

  ul {
    li {
      header {
        box-sizing: border-box;
        padding: 10rem;
        color: #fff;
        width: 100%;
        height: 100rem;
        font-size: 16rem;
        border-radius: 12rem;
        background: linear-gradient(145.05deg,
            rgba(252, 129, 129, 1) 0%,
            rgba(172, 71, 255, 1) 100%);
        box-shadow: 0rem 5rem 15rem rgba(206, 199, 212, 0.1);

        .text {
          text-align: center;
          font-weight: 600;
          line-height: 80rem;
          font-size: 30rem;
        }
      }

      .card {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: 10rem;
        margin-top: 20rem;
        width: 100%;
        background-color: #fff;
        border-radius: 10rem;

        h5 {
          font-size: 20rem;
          font-weight: 500;
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          margin-top: auto;

          .addCart {
            margin-left: auto;

            :deep(.van-stepper--round .van-stepper__plus) {
              background-color: #642e8e;
            }

            :deep(.van-stepper--round .van-stepper__minus) {
              color: #642e8e;
              border-color: #642e8e;
            }

            .total {
              font-size: 30rem;

              b {
                font-size: 16rem;
              }
            }
          }
        }

        .title {
          font-size: 18rem;
          display: flex;
          justify-content: space-between;
        }
      }

      footer {
        padding: 40rem 10rem;

        p {
          color: #ccc;
          font-size: 14rem;

          &:last-child {
            line-height: 30rem;
          }
        }

        >.button {
          width: 200rem;
          height: 40rem;
          color: #fff;
          line-height: 40rem;
          text-align: center;
          font-size: 18rem;
          background-color: #642e8e;
          border: 0;
          margin: 20rem auto;
          border-radius: 50rem;
        }
      }
    }
  }
}
</style>
